import React, { Component } from 'react';
import {
	Text, View, Image, StyleSheet, TouchableOpacity, DeviceEventEmitter
} from "react-native";
import { CURRENCY } from '../../../../../utils/helper';
import MethodUtil from '../../../../../utils/MethodUtil';
import { GLOBAL } from '../../../../../config/global';
import moment from 'moment';
const scale = GLOBAL.SCALE;



export class ViewList extends Component {
	constructor(props) {
		super(props);
		this.state = {
		}
		this.payTypeData = [];
		this.payTypeArr = [];
	}

	// 支付 
	_payInit = (data) => {
		let { QHPayTypeData, inPayTypeData } = this.props;
		//付款类型
		if (data.isQhXhXsBiz === 'Y') {
			this.payTypeData = QHPayTypeData;
		} else {
			this.payTypeData = inPayTypeData;
		}
		//付款类型初始化
		this.payTypeData.forEach((item, indexKey) => {
			if (data && item.dictKey == data.payType) {
				this.payTypeArr = this.payTypeData[indexKey] && this.payTypeData[indexKey].comments ? eval(this.payTypeData[indexKey].comments) : [];
			}
		})
		this.payTypeArrNew = []
		this.payTypeArr && this.payTypeArr.forEach((item) => {
			let value = data[item.name];
			if (value) {
				if (item.name === "prepayAmtBalanceDate") {
					value = moment(value).format('YYYY-MM-DD');
				}
				let str = item.title + value + item.text
				this.payTypeArrNew.push(str);
			}
		})
		return this.payTypeArrNew
	}
	_viewPayItem = (data) => {
		let { payTypeName, payStyleName, fundCreditFee, fundVoucherFee, voucherExpireDays, deliveryExpireDays, orderType } = data
		let payTypeArrNew = this._payInit(data)
		return (
			<View>
				<View>
					<Text style={styles.bockTitle}>{payTypeName}｜{payStyleName}</Text>
				</View>
				<View style={styles.bockBefore}>
					{payTypeArrNew.length > 0 ? payTypeArrNew.map((item, index) => {
						return (
							<Text style={styles.bockText} key={index}>{item}  |  </Text>
						)
					})
						: null
					}
					{
						(deliveryExpireDays || deliveryExpireDays == 0) ? <Text style={styles.bockText}>{orderType == 'P' ? '预付' : '赊销'}(授信)账期{deliveryExpireDays}天 | </Text> : null
					}
					{fundCreditFee ?
						<Text style={styles.bockText}>资金(授信){fundCreditFee} 元/吨 | </Text> : null
					}
					{fundVoucherFee ?
						<Text style={styles.bockText}>资金(票据) {fundVoucherFee} 元/吨 | </Text> : null
					}
					{voucherExpireDays ?
						<Text style={styles.bockText}>票据期限 {voucherExpireDays}天</Text> : null
					}
				</View>
			</View>
		)
	}
	_viewCarItem = (data) => {
		let { purchaseDeliveryTypeName, saleDeliveryTypeName, transportTypeName, lostRenderName, lostRate, logisticsFee, orderType, logisticsPrice } = data
		return (
			<View style={styles.bockBefore}>
				{purchaseDeliveryTypeName || saleDeliveryTypeName ?
					<Text style={styles.bockText}>{orderType === 'P' ? purchaseDeliveryTypeName : saleDeliveryTypeName} |  </Text> : null
				}
				{transportTypeName ?
					<Text style={styles.bockText}>{transportTypeName} | </Text> : null
				}
				{logisticsFee ?
					<Text style={styles.bockText}>运费成本 {MethodUtil.toThousands(logisticsFee, 2)} 元/吨 | </Text> : null
				}
				{logisticsPrice ?
					<Text style={styles.bockText}>额外运费 {MethodUtil.toThousands(logisticsPrice, 2)} 元/吨 | </Text> : null
				}
				{lostRenderName ?
					<Text style={styles.bockText}>{lostRenderName}承担 | </Text> : null
				}
				{lostRate ?
					<Text style={styles.bockText}>{lostRate * 100}%（途损率）</Text> : null
				}
			</View>
		)
	}
	//支付信息
	_viewPay = () => {
		let { data } = this.props;
		let { ubmpResourceBidDetailInfo, orderType, bizMode, oppoOrderInfo } = data
		let saleInfo, purchaseInfo
		if (bizMode === 1) {
			purchaseInfo = (orderType === 'P' ? data : oppoOrderInfo);//采购订单基本信息
			saleInfo = (orderType === 'P' ? oppoOrderInfo : data);//销售订单基本信息
		}
		return (
			<View>
				{ubmpResourceBidDetailInfo ?
					<View>
						{this._viewPayItem(ubmpResourceBidDetailInfo)}
						<View>
							<View style={styles.bockAfterTitleBg}>
								<Text style={styles.bockAfterTitle}>业务调整后</Text>
							</View>
							<View style={styles.bockAfter}>
								{this._viewPayItem(data)}
							</View>
						</View>
					</View> :
					<View>
						{bizMode === 0 ?
							this._viewPayItem(data) :
							<View>
								<View style={styles.flexRow}>
									<View style={styles.modeType}>
										<Text style={styles.modeTypeText}>采</Text>
									</View>
									{purchaseInfo ?
										this._viewPayItem(purchaseInfo)
										: null
									}
								</View>
								<View style={[styles.flexRow, { marginTop: 20 }]}>
									<View style={styles.modeTypeSale}>
										<Text style={styles.modeTypeText}>销</Text>
									</View>
									{saleInfo ?
										this._viewPayItem(saleInfo)
										: null
									}
								</View>
							</View>
						}
					</View>
				}
			</View>
		)
	}
	//运输信息
	_viewCar = () => {
		let { data } = this.props;
		let { srcAddress, destAddress, ubmpResourceBidDetailInfo, bizMode, oppoOrderInfo, orderType } = data
		let saleInfo, purchaseInfo
		if (bizMode === 1) {
			purchaseInfo = (orderType === 'P' ? data : oppoOrderInfo);//采购订单基本信息
			saleInfo = (orderType === 'P' ? oppoOrderInfo : data);//销售订单基本信息
		}
		return (
			<View>

				{ubmpResourceBidDetailInfo ?
					<View>
						{this._viewCarItem(ubmpResourceBidDetailInfo)}
						<View style={styles.bockBox}>
							<View style={styles.bockCarBox}>
								<Text style={styles.bockText}>出库地：{ubmpResourceBidDetailInfo.srcAddress || '暂无数据'}</Text>
							</View>
							{ubmpResourceBidDetailInfo.destAddress ?
								<View style={styles.bockCarBox}>
									<Text style={styles.bockText}>目的地：{ubmpResourceBidDetailInfo.destAddress || '暂无数据'}</Text>
								</View> : null
							}

						</View>
						<View>
							<View style={styles.bockAfterTitleBg}>
								<Text style={styles.bockAfterTitle}>业务调整后</Text>
							</View>
							<View style={[styles.bockAfter]}>
								{this._viewCarItem(data)}
								<View style={styles.bockBox}>
									<View style={styles.bockCarBox}>
										<Text style={styles.bockText}>出库地：{data.srcAddress || '暂无数据'}</Text>
									</View>
									{data.destAddress ?
										<View style={styles.bockCarBox}>
											<Text style={styles.bockText}>目的地：{data.destAddress || '暂无数据'}</Text>
										</View> : null
									}

								</View>
							</View>
						</View>
					</View>
					:
					<View>
						{bizMode === 0 ?
							this._viewCarItem(data) :
							<View>
								<View style={styles.flexRow}>
									<View style={styles.modeType}>
										<Text style={styles.modeTypeText}>采</Text>
									</View>
									{purchaseInfo ?
										this._viewCarItem(purchaseInfo)
										: null}
								</View>
								<View style={[styles.flexRow, { marginTop: 20 }]}>
									<View style={styles.modeTypeSale}>
										<Text style={styles.modeTypeText}>销</Text>
									</View>
									{saleInfo ?
										this._viewCarItem(saleInfo) : null}
								</View>
							</View>
						}
						<View style={styles.bockBox}>
							<View style={styles.bockCarBox}>
								<Text style={styles.bockText}>出库地：{srcAddress || '暂无数据'}</Text>
							</View>
							{destAddress ?
								<View style={styles.bockCarBox}>
									<Text style={styles.bockText}>目的地：{destAddress || '暂无数据'}</Text>
								</View> : null
							}

						</View>
					</View>

				}

			</View>
		)
	}
	//交货计划
	_viewPlan = () => {
		let { deliveryPlan } = this.props;
		return (
			<View>
				{deliveryPlan && deliveryPlan.orderDeliveryPlanList && deliveryPlan.orderDeliveryPlanList.length !== 0 ? deliveryPlan.orderDeliveryPlanList.map((item, index) => {
					return (
						<View style={styles.bockBox} key={index}>
							<View style={styles.bockRow}>
								<Text style={styles.bockRowTitle}>数量</Text>
								<Text style={styles.bockRowText}>{item.quantity}吨｜{item.deliveryBeginDate}-{item.deliveryEndDate}</Text>
							</View>
						</View>
					)
				}) :
					<View style={styles.bockBox}>
						<Text>暂无数据</Text>
					</View>
				}
			</View>
		)
	}
	//费用成本预估
	_viewEstimate = () => {
		let { deliveryPlan } = this.props;
		return (
			<View>
				{deliveryPlan && deliveryPlan.orderFeeList && deliveryPlan.orderFeeList.length !== 0 ? deliveryPlan.orderFeeList.map((item, index) => {
					return (
						<View style={styles.bockBox} key={index}>
							<View style={styles.bockRow}>
								<Text style={styles.bockRowTitle}>{item.feeTypeName}</Text>
								<Text style={styles.bockRowText}>{item.feeAmt}</Text>
							</View>
						</View>
					)
				}) :
					<View style={styles.bockBox}>
						<Text>暂无数据</Text>
					</View>
				}
			</View>
		)
	}
	render() {
		let { type } = this.props
		return (
			<View>
				{type === 'pay' ?
					this._viewPay() : null
				}
				{type === 'car' ?
					this._viewCar() : null
				}
				{type === 'plan' ?
					this._viewPlan() : null
				}
				{type === 'estimate' ?
					this._viewEstimate() : null
				}
			</View>

		)

	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#F4F7FE',
	},
	topTitle: {
		fontSize: 18 * scale,
		color: '#fff'
	},
	topBox: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		paddingHorizontal: 18
	},
	bockTitle: {
		fontSize: 12 * scale,
		color: '#000',
		fontWeight: 'bold',
		paddingHorizontal: 12,
		marginBottom: 3
	},
	bockBox: {
		paddingHorizontal: 12,
	},
	bockBefore: {
		paddingLeft: 12,
		paddingRight: 5,
		flexDirection: 'row',
		alignItems: 'center',
		flexWrap: 'wrap',
	},
	bockText: {
		fontSize: 11 * scale,
		color: '#000',
		lineHeight: 18,
		textAlignVertical: 'center'
	},
	bockCarText: {
		fontSize: 12 * scale,
		color: '#000',
		lineHeight: 18,
	},
	bockCarBox: {
		backgroundColor: '#F4F7FE',
		borderRadius: 6,
		paddingVertical: 9,
		marginTop: 10,
		paddingHorizontal: 12,
	},
	bockAfter: {
		// flexDirection: 'row',
		// alignItems: 'center',
		// flexWrap: 'wrap',
		borderRadius: 2,
		borderColor: '#E02020',
		borderWidth: 1,
		marginTop: 20,
		marginHorizontal: 6,
		// paddingHorizontal: 5,
		paddingTop: 15,
		paddingBottom: 5,
		position: 'relative',
		overflow: 'visible'
	},
	bockAfterTitleBg: {
		position: 'absolute',
		zIndex: 1,
		paddingHorizontal: 5,
		left: 10,
		top: 12
	},
	bockAfterTitle: {
		fontSize: 12 * scale,
		color: '#E02020',
		backgroundColor: '#fff'
	},
	bockRow: {
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 5
	},
	bockRowTitle: {
		fontSize: 12,
		color: '#a5a6a7',
		marginRight: 10,
		textAlign: 'right'
	},
	bockRowText: {
		fontSize: 12,
		color: '#000',
	},
	btmBox: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingHorizontal: 13,
		marginTop: 10
	},

	btmTitle: {
		fontSize: 12,
		color: '#080808',
		width: 60,
		marginRight: 10,
		textAlign: 'right'
	},
	btmText: {
		fontSize: 12,
		color: '#080808',
		width: '80%'
	},
	modeType: {
		width: 20,
		borderRadius: 2,
		paddingHorizontal: 4,
		paddingVertical: 2,
		// marginRight: 10,
		backgroundColor: '#F7B500'
	},
	modeTypeSale: {
		width: 20,
		borderRadius: 2,
		paddingHorizontal: 4,
		paddingVertical: 2,
		backgroundColor: '#3E7406'
	},
	modeTypeText: {
		fontSize: 11,
		color: '#FFFFFF'
	},
	flexRow: {
		flexDirection: 'row',
		marginLeft: 14,
		alignItems: 'flex-start'
	}
})